<template>
    <div style="height:100%" id="basic">
        <nav-bar :showBack="false" :title="selectNav"></nav-bar>
        <router-view class="content"></router-view>
        <tab-bar class="bottom" :selected="selectedTab"></tab-bar>
    </div>
</template>

<script>
import TabBar from './tabbar/TabBar.vue'
import NavBar from './navbar/NavBar.vue'
export default {
    name: 'Basic',
    data () {
    return {
        selectNav: '首页',       //  头部标题
        selectedTab: 'home'     //  被选中的底部导航标签
    }
    },
    components: {
        TabBar,
        NavBar
    },
    // 因为切换底部导航栏会组件复用，使用wacth监听$route给底部导航栏着色
    watch: {
        '$route' (to, from) {
            if (to.name === 'home') {
                this.selectNav = '首页'
                this.selectedTab = 'home'
            } else if (to.name === 'message') {
                this.selectNav = '消息'
                this.selectedTab = 'message'
            } else if (to.name === 'persional') {
                this.selectNav = '个人中心'
                this.selectedTab = 'persional'
            }
        }
    },
    // 组件内的导航守卫，当从不复用的页面跳转进来时调用，用于给底部导航栏着色
    beforeRouteEnter (to, from, next) {
        next(vm => {
            if (to.name === 'home') {
                vm.selectNav = '首页'
                vm.selectedTab = 'home'
            } else if (to.name === 'message') {
                vm.selectNav = '消息'
                vm.selectedTab = 'message'
            } else if (to.name === 'persional') {
                vm.selectNav = '个人中心'
                vm.selectedTab = 'persional'
            }
        })
    }
}
</script>

<style scoped>
.bottom{position: absolute; bottom: 0;}
.content{height: 82%; overflow: auto;}
</style>
